<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: shuangchenyue
  Date: 2021/6/4
  Time: 21:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>商城购物</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/onlineshop/css/style.css">
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/onlineshop/css/tubiao.css">


    <style type="text/css">
        .warp{
            width:1226px;
            height:460px;

            position: relative;
        }
        .list{
            width:1226px;
            height:460px;;
            list-style: none;
            position: relative;
            padding-left: 0px;
        }
        .item{
            position: absolute;
            width: 100%;
            height: 100%;
            color: white;
            font-size: 50px;
            opacity: 0;
            transition: all .8s;
        }
        .item:nth-child(1)
        {
            background-color: black;
        }
        .item:nth-child(2)
        {
            background-color: yellow;
        }
        .item:nth-child(3)
        {
            background-color: blue;
        }
        .btn{
            width:50px;
            height: 100px;
            position: absolute;
            top: 150px;
            z-index:100;
            background-color: rgba(255,255,255,0.3);
            border: none;
        }

        .btnp{
            color: rgba(102, 78, 78, 0.6);
            font-size: 40px;
        }
        #goPre{
            left: 0px;
        }
        #goNext{
            right: 0px;
        }

        .item.active{
            z-index: 10;
            opacity: 1;
        }

        .pointList{
            padding-left: 0px;
            list-style: none;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 1000;
        }
        .point{
            width: 8px;
            height: 8px;
            background-color: rgba(0,0,0,0.4);
            border-radius: 100%;
            float: left;
            margin-right: 14px;
            border: solid;
            border-width: 2px;
            border-color: rgba(255,255,255,0.6);

            cursor: pointer;
        }

        .point.active{
            background-color: rgba(255,255,255,0.8);

        }
    </style>
</head>
<body>
<!-- start header -->
<header>
    <div class="top center"style="text-align: center">
        <div class="right fr">
            <div class="gouwuche fr"><a href="">购物车</a></div>
            <div class="fr">
                <ul>
                    <li><a href="login.jsp" target="_blank">登录</a></li>
                    <li>|</li>
                    <li><a href="/onlineshop/mvc/toRegister.do" target="_blank" >注册</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</header>
<!--end header -->

<!-- start banner_x -->
<div class="banner_x center">
    <a href="index.jsp" target="_blank"><div class="logo fl"></div></a>
    <div class="nav fl" style="margin-left: 200px">
        <div class="clear">  </div>
        <div class="clear">  </div>
        <ul>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=1" target="_blank">枪炮</a></li>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=2">刀具</a></li>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=3">载具</a></li>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=4">飞行器</a></li>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=5">舰艇</a></li>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=6">导弹</a></li>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=7">其他</a></li>
        </ul>
    </div>
    <div class="search fr">
        <form action="${pageContext.request.contextPath}/mvc/showProductBySearch.do" method="post">
            <div class="text fl">
                <input type="text" class="shuru"  placeholder="Glock-17&nbsp;QBZ191现货" style="text-align: center" name="name">
            </div>
            <div class="submit fl">
                <input type="submit" class="sousuo" value="搜索"/>
            </div>
            <div class="clear"></div>
        </form>
        <div class="clear"></div>
    </div>
</div>
<!-- end banner_x -->

<!-- start banner_y -->

<div class="warp center">
    <ul class="list">
        <li class="item active" style="background-image: url(http://localhost:8080/onlineshop/image/banner2.jpg)"></li>
        <li class="item" style="background-image: url(http://localhost:8080/onlineshop/image/banner3.jpg)"></li>
        <li class="item" style="background-image: url(http://localhost:8080/onlineshop/image/banner4.jpg)"></li>
    </ul>
    <ul class="pointList">
        <li class="point active" data-index = '0'></li>
        <li class="point" data-index = '1'></li>
        <li class="point" data-index = '2'></li>
    </ul>
    <button type="button" class="btn" id="goPre"><p class="btnp"><i class="iconfont" style="font-size: 30px">&#xea7b;</i></p></button>
    <button type="button" class="btn" id="goNext"><p class="btnp"><i class="iconfont" style="font-size: 30px">&#xe96d;</i></p></button>
</div>

<script type="text/javascript">
    var items=document.getElementsByClassName('item');//图片
    var points = document.getElementsByClassName('point');//点
    var goPreBtn=document.getElementById('goPre');
    var goNextBtn=document.getElementById('goNext');

    var time=0;//定时器图片跳转参数
    var index = 0;//表示第几张图片在展示 ---> 意味着第index张图片有active这个类名
    //同时可以表示第几个点在展示

    var clearActive = function ()
    {
        for (var i=0;i<items.length;i++){
            items[i].className = 'item';
        }

        for (var i=0;i<points.length;i++){
            points[i].className = 'point';
        }
    }

    var goIndex = function (){
        clearActive();
        console.log(index);
        points[index].className = 'point active';
        items[index].className = 'item active';
    }

    var goNext = function (){
        if (index<2)
        {
            index ++;
        }else {
            index=0;
        }

        goIndex();
    }

    var goPre = function (){
        if (index==0)
        {
            index = 2;
        }else {
            index --;
        }
        goIndex();
    }

    goNextBtn.addEventListener('click',function ()
    {
        goNext();
    })

    goPreBtn.addEventListener('click',function (){
        goPre();
    })

    for (var i=0;i<points.length;i++)
    {
        points[i].addEventListener('click',function (){
            var pointIndex = this.getAttribute('data-index');
            console.log(pointIndex);
            index = pointIndex;
            goIndex();
            time=0;
        })
    }

    var time=0;

    setInterval(function ()
    {
        time++;
        if (time == 20){
            goNext();
            time=0;
        }
    },100)
</script>

<!-- start danpin -->
<div class="biaoti center">商城明星单品</div>
<div class="peijian w">

    <div class="main center">
        <div class="content">



            <c:forEach items="${requestScope.allProductList}" var="product">
                <div class="remen fl">
                    <div class="xinpin"><span>${product.category.name}</span></div>
                    <div class="tu"><a href="${pageContext.request.contextPath}/mvc/showProductDetail.do?id=${product.id}"><img src="${product.images}"></a></div>
                    <div class="miaoshu"><a href="${pageContext.request.contextPath}/mvc/showProductDetail.do?id=${product.id}">${product.name}</a></div>
                    <div class="jiage">$ ${product.baseprice}</div>
                    <div class="pingjia">${product.company}</div>
                    <div class="piao">
                        <a href="${pageContext.request.contextPath}/mvc/showProductDetail.do?id=${product.id}">
                            <span>发货速度很快！</span>
                            <span>很容易上手，谢谢卖家！</span>
                        </a>
                    </div>
                </div>
            </c:forEach>



        </div>
    </div>
</div>
</div>

<footer>
    <div class="copyright">简体 | 繁体 | English | 常见问题</div>
    <div class="copyright">罗德岛制药公司版权所有-罗ICP备111451419-<img src="image/ghs.png" alt="">罗公网安备1145141919810号-罗ICP证114514号</div>
</footer>

</body>
</html>
